<template>
  <div>
      <div 
        class="item" 
        v-for='(item,index) of list' 
        :key='index'
      >
       <!--一级栏目-->
        <div class="item-title border-bottom">
          <span class='item-title-icon'></span> 
          {{item.title}} 
          <!--是否包含内容-->
          <div v-if='item.info'>
            <div class="item-info-content border-top" v-for='(info,index) in item.info' :key='index'>
              <div class="item-info-title">{{info.text}}</div>
              <div class="item-info-price">
                <span class='price-color'>￥</span>
                <span class='price-color price-font'>{{info.price}} </span>
                <span>起</span>
                <span class='iconfont banner-icon'>&#xe60c;</span>
              </div>
            </div>
          </div>
        </div> 
        <!--二级栏目 递归组件：组件调用自身
        将二级数组传给list，再次循环使用--> 
        <div v-if='item.children' class='item-children'>
          <detaillist :list='item.children'></detaillist>
        </div>       
      </div>
  </div>
</template>

<script>
export default {
  name:'detaillist',//此处的名字用于递归组件，自我调用 
  props:{
    list:Array
  }
}
</script>

<style lang="stylus" scoped>
.item-title
  line-height:.6rem 
  font-size:0.32rem
  padding:0 .2rem
  .item-info-content
    display:flex
    align-items:center
    position:relative
    top:0
    left:0
    font-size:.4rem 
    .item-info-title 
      flex:1
      height:1rem
      line-height:.53rem
      margin:.1rem
      padding-right:.45rem
      font-size:.29rem
      overflow:hidden//超出两行显示
      text-overflow:ellipsis 
      display:-webkit-box
      -webkit-box-orient:vertical
      -webkit-line-clamp:2
    .item-info-price
      font-size:.2rem
      letter-spacing:-.02rem
      .price-color
        color:#f90
      .price-font
        font-size:.42rem
  .item-title-icon
    position:relative//相对自身原本的位置变化，占据原来的空间位置；绝对定位脱离文档流，不占据原来的位置
    top:.06rem
    left:.06rem
    display:inline-block//行内元素无法设置宽高
    width:.36rem
    height:.36rem 
    margin-right:.1rem
    background:url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat
    background-size:.4rem 3rem
.item-children
   padding:0 .24rem    
</style>
